<template>
  <div class="backdrop">
    <!-- 商品列表 -->
    <div class="productList" @click="$router.push('/GoodsDetails')">
      <!-- 横排 -->
      <!-- <van-card
        :price="item.price"
        :title="item.name"
        :thumb="item.img"
        v-for="item in goodsList"
        :key="item.id"
      >
        <template #num>
          <span>销量: {{ item.volume }}</span>
        </template>
      </van-card> -->
      <!-- 全等长方形 -->
      <div v-for="item in goodsList" :key="item.id" class="rectangle">
        <img :src="item.img" />

        <div class="details">
          <p class="goodsTitle">
            <van-tag type="danger" v-if="item.isDirect">直营</van-tag>
            <van-tag color="#909090" text-color="#fff" v-if="!item.isHave"
              >缺货</van-tag
            >
            {{ item.name }}
          </p>
          <div class="price">
            <span class="jaige">￥{{ item.price }}</span>
            <span>销量: {{ item.volume }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--  -->
</template>
<script>
import { getGoodsListAPI } from "@/api/user";

export default {
  name: "from",
  data() {
    return {
      // 商品列表
      goodsList: [],
    };
  },
  created() {
    // 调用接口获得数据
    this.getGoodsList();
  },
  methods: {
    // 获取商品列表数据
    async getGoodsList() {
      //发送请求,调接口
      const resp = await getGoodsListAPI();
      // console.log(resp);
      this.goodsList = resp.data.list;
    },
  },
};
</script>
<style scoped lang="less">
// 商品列表
.backdrop {
  .productList {
    // margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    margin: 10px;
    background-color: #eeeeee;
    .rectangle {
      // display: flex;
      flex-direction: column;
      width: 45%;
      height: 257px;
      margin-top: 20px;
      margin: 4px;
      padding: 2px;
      border: 1px solid rgb(230, 228, 228);
      border-radius: 10px;
      background-color: #fefdfd;

      img {
        width: 100%;
        height: 160px;
      }
      .details {
        .goodsTitle {
          font-size: 16px;
          overflow: hidden;
          margin: 1;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .price {
          margin-top: 6px;
          display: flex;
          justify-content: space-between;
          .jaige {
            color: #d81e06;
          }
          span {
            color: #b7b7b7;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
